<style>
.el-form-item label{
  width: 120px;
}
.el-form-item dev{
  margin-left: 120px;
}
</style>
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="应用ID">
        <span style="color: #b1b1b1">待生成</span>
      </el-form-item>
      <el-form-item label="应用名称" prop="appName">
        <el-input v-model="form.appName" placeholder="请输入应用名称"/>
      </el-form-item>
      <el-form-item label="签名KEY">
        <span style="color: #b1b1b1">待生成</span>
      </el-form-item>
      <el-form-item label="同步通知地址" prop="returnUrl">
        <el-input v-model="form.returnUrl" placeholder="请输入同步通知地址"/>
      </el-form-item>
      <el-form-item label="异步通知地址" prop="notifyUrl">
        <el-input v-model="form.notifyUrl" placeholder="请输入异步通知地址"/>
      </el-form-item>
      <el-form-item label="退款通知地址" prop="refundUrl">
        <el-input v-model="form.refundUrl" placeholder="请输入退款通知地址"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">返回上一级</el-button>
      <el-button type="primary" @click="submitForm">立即保存</el-button>
    </div>

  </div>
</template>

<script>
import { addApplication } from "@/api/system/application";

export default {
  name: "ApplicationAdd",
  dicts: ['status'],
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        appName: [
          {required: true, message: "应用名称不能为空", trigger: "blur"}
        ],
        returnUrl: [
          {required: true, message: "同步通知地址不能为空", trigger: "blur"}
        ],
        notifyUrl: [
          {required: true, message: "异步通知地址不能为空", trigger: "blur"}
        ],
        refundUrl: [
          {required: true, message: "退款通知地址不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {},
  methods: {
    // 取消按钮
    cancel() {
      this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页面
      this.$router.replace({ path: "/system/application/index" }); // 关闭之后要返回的页面
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addApplication(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页面
            this.$router.replace({ path: "/system/application/index" }); // 关闭之后要返回的页面
          });
        }
      });
    }
  }
};
</script>
